<template>
	<view class="page">
		<map class="map" :latitude="lat" :longitude="lng" :markers="markers"></map>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "business-map",
		data() {
			return {
				lat: "",
				lng: "",
				markers: [{
						id: 1,
						longitude: 0, //图标的经度
						latitude: 0, //图标的纬度
						width: 30,
						height: 30,
						iconPath: "/static/images/business_map/map_pos.png",
						callout: {
							fontSize: 14,
							content: "",
							bgColor: '#FFFFFF',
							padding: 8,
							borderWidth: 1,
							borderColor: "#CCCCCC",
							borderRadius: 4,
							display: "ALWAYS"
						}
					}


				]
			}
		},
		onLoad(opts) {
			//分店的id
			this.branch_shop_id = opts.branch_shop_id ? opts.branch_shop_id : "";
			//经度
			this.lng = opts.lng ? opts.lng : "";
			//纬度
			this.lat = opts.lat ? opts.lat : "";
			this.markers[0].longitude = this.lng;
			this.markers[0].latitude = this.lat;
			//文本内容
			this.markers[0].callout.content = this.shopInfo.branch_shop_name + "\r\n" + this.shopInfo.address;
		},
		computed: {
			...mapState({
				shopInfo: state => state.business.shopInfo
			})
		},
		onShareAppMessage(res) {
			return {
				title: this.shopInfo.branch_shop_name,
				path: '/pages/business_map/index?branch_shop_id=' + this.branch_shop_id + '&lng=' + this.lng + '&lat=' +
					this.lat + ''
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.map {
		width: 100%;
		height: 100%;
	}
</style>